<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.sql.*" errorPage="error.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cars | Alvaro´shop</title>
<link href="shopStyles.css" rel="stylesheet" type="text/css"> <!-- guardamos el css en la raiz porque sino hay cosas que no funcionan -->
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style2.css" />
		
	

<!-- Coloca esta petición de presentación donde creas oportuno. -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>


<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		var buttons = { previous:$('#jslidernews2 .button-previous') ,
						next:$('#jslidernews2 .button-next') };			 
		$('#jslidernews2').lofJSidernews( { interval:5000,
											 	easing:'easeInOutQuad',
												duration:1200,
												auto:false,
												mainWidth:727,
												mainHeight:300,
												navigatorHeight		: 100,
												navigatorWidth		: 310,
												maxItemDisplay:4,
												buttons:buttons } );						
	});

</script>


<!-- Pop out logout-->
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=200, top=85, left=140";
window.open(pagina,"",opciones);
}

function about()
{
alert("Aplicacion realizada por:\nAlvaro Garcia Ojea\n5º Ingenieria informatica.\n\nEmail: alvarogarcia9@gmail.com");
}
</script>

<!-- maxItemDisplay: 3, eso es lo normal -->

<style>
	
	ul.lof-main-wapper li {
		position:relative;	
	}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>

</head>

<body>




<div id="fb-root"></div>
<div align="center">
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  
</div>
<div class="container">
  <div class="header">
    
    <div align="center">
      <table width="100%" border="0">
        <tr>
          <td><img src="images/logoshop2.png" width="410" height="165" alt="shop"></td>
          <td align="right"><img src="images/flag copia.png" width="149" height="123" alt="yourf1store">
            <!-- Boton me gusta de facebook -->
            <div class="fb-like" data-send="true" data-layout="button_count" data-width="100" alignt="right" data-show-faces="true"></div>
            
            
                    
        <%-- IDENTIFIACION DE USUARIO CON SESIONES O COOKIES --%>

        <%@ page language="java" %>
        <%
        String cookieName = "email";
        Cookie cookies [] = request.getCookies ();
        Cookie email = null;
        if (cookies != null)
        {
            for (int i = 0; i < cookies.length; i++) 
            {
                if (cookies [i].getName().equals (cookieName))
                {
                    email = cookies[i];
                    break;
                }
            }
        }
        %>
            
            <!-- SiteSearch Google -->
            <FORM method="get" action="http://www.google.com/search">
              <input type=hidden name=ie value=UTF-8>
              <input type=hidden name=oe value=UTF-8>
              <TABLE bgcolor="#F27405" class="borderSearchRightDown"><tr>
                <td class="borderSearchRightDown">
                  <INPUT TYPE="search" name="q" size="31" maxlength="255" value="" placeholder="Search something you want...">
                  <INPUT type="submit" name="btnG" VALUE="Buscar en sitio">
                  <font size=-1>
                    <input type="hidden" name="domains" value="index.jsp"><br><input type="radio" name="sitesearch" value=""> 
                    <span class="fontSpecial">WWW</span>
                    <input type="radio" name="sitesearch" value="index.jsp" checked>
                    <span class="fontSpecial">F1 store</span><br>
                    </font>
                  
              </td></tr></TABLE>
              <div align="right">
               <!-- Reconocimiento de usuario -->
              
              
              <label><strong><%if(email!=null){%><%=email.getValue()%></strong> | <a href="javascript:Abrir_ventana('logout_popup.jsp')"><font size="1" face="Verdana">logout</font></a> </label>
              <label> | <a href="options.jsp"><font size="1" face="Verdana">options</font></a></label> 
              <%}
               else{
               
              %>
              <label><strong> Unknown user |</strong></label> <a href="login.jsp">Login</a>
              <%}%>

              <!-- Fin reconocimiento del usuario --> 
              
              
              	
                <img src="images/eng.gif" width="20" height="15" alt="eng">   
                <img src="images/esp.gif" width="20" height="15" alt="esp">
                <img src="images/fra.gif" width="20" height="15" alt="fra"> 
                <img src="images/ger.gif" width="20" height="15"> 
                <img src="images/por.gif" width="20" height="15" alt="por">
                <a href="#final" class="fontSpecialLanguageChooser"><font size="1" face="Verdana">Choose language</font></a></div>
                
            </FORM>
        </tr>
      </table>
      
    </div>
  </div>
</div>

<div class="container">
<div class="header">
  <div align="center">
    <ul class="menu">    
      <li><a href="index.jsp"><span>Home</span></a></li>
<% if(email==null){
          %>
      
      <li><a href="login.jsp"><span>Login</span></a></li>
      <li><a href="signup.jsp"><span>Signup</span></a></li>

      <%}
        else
        {%>
      <li><a href="logout_popup.jsp"><span>Logout</span></a></li>
      <li><a href="options.jsp"><span>Options</span></a></li>
      <%}%>     
      <li onClick="about()"><a href="#"><span>About</span></a></li>
      <li><a href="contact.jsp"><span>Contact</span></a></li>
      <li><a href="cars.jsp" class="active"><span>Cars</span></a></li>
      <li><a href="/Apparel"><span>Apparel</span></a></li>
      <li><a href="gadgets.jsp"><span>Gadgets</span></a></li>
      <li><a href="/CarAccessories"><span>Car Accesories</span></a></li>
      <li><a href="search.jsp"><span>Search</span></a></li>
	  <li><a href="Scart.jsp"><span>Cart</span></a></li>

    </ul>
    
  </div>
</div>
</div>

<div class="container">
    <div class="content">

	        
	        <div align="center">
	          
	          <!------------------------------------- THE CONTENT ------------------------------------------------->
                </div>
	        <div id="jslidernews2" class="lof-slidecontent" style="width:100%; height:300px;"> 
	          <div align="center"><!-- lo normal son width: 980px; -->
                  </div>
	          <div class="preload">
                      <div>
                          
                      </div>
                      
                  </div>
	          
	          
	          <div class="button-previous">
	            <div align="center">Previous</div>
	          </div>
	          
	          <div align="center">
	            <!-- MAIN CONTENT --> 
                  </div>
	          <div class="main-slider-content" style="width:684px; height:400px;">
                    <div align="right">
                        <!--<ul class="sliders-wrap-inner">
                            <li>	                      
                                <img src="images/thumbl_980x340.png" title="F1 Cars" >           
                            </li>
                        </ul>-->
                    </div>
                    <ul class="sliders-wrap-inner">
                        <li>
                            <div align="center"><img src="images/thumbl_980x340.png" title="You choose" >           
                            </div>
                            <div class="slider-description">
                                <div class="slider-meta">
                                    <div align="left"><a target="_parent" title="F1 Cars" href="#Category-1">/ Cars - Ferrari, RDR, Mercedes... /</a> <i> — Wednesday, February 2, 2012</i>	                      </div>
                                </div>
                                <h4 align="left">Our cars</h4>
                                <p align="left">We offer a selection of the best formula 1 cars
                                    <a class="readmore" href="#">Read more </a>
                                </p>
                            </div>
                        </li> 
                        <li>
                            <div align="center"><img src="images/thumbl_980x340_002.png" title="You choose" >           
                            </div>
                            <div class="slider-description">
                                <div class="slider-meta">
                                    <div align="left"><a target="_parent" title="You choose" href="#Category-2">/  You choose: new, km 0, used, second hand /</a> 	<i> — Wednesday, February 2, 2012</i></div>
                                </div>
                                <h4 align="left"> You are are the owner, you choose</h4>
                                <p align="left">In Alvaro F1 Store you can buy the car you need!
                                    <a class="readmore" href="#">Read more </a>
                                </p>
                            </div>
                        </li> 
                        <li>
                            <div align="center"><img src="images/thumbl_980x340_003.png" title="Pay in 12 months" >            
                            </div>
                            <div class="slider-description">
                                <div class="slider-meta">
                                    <div align="left"><a target="_parent" title="Pay in 12 months" href="#Category-3">/  Pay in 12 months without interest /</a> 	<i>  — Wednesday, February 2, 2012</i></div>
                                </div>
                                <h4 align="left">Customize your plan</h4>
                                <p align="left">You can pay easily
                                    <a class="readmore" href="#">Read more </a>
                                </p>
                            </div>
	                </li> 
                        <li>
                            <div align="center"><img src="images/thumbl_980x340_004.png" title="HRT" >            
                            </div>
                            <div class="slider-description">
                                <div class="slider-meta">
                                    <div align="left"><a target="_parent" title="HRT" href="#Category-4">/ Hispania Racing Team /</a>	<i>  — Wednesday, February 2, 2012</i></div>
                                </div>
                                <h4 align="left">We are the official HRT store</h4>
                                <p align="left">All HRT products!!! Here you will find everything you want!
                                    <a class="readmore" href="#">Read more </a>
                                </p>
                            </div>
                        </li> 
                        <li>
                            <div align="center"><img src="images/thumbl_980x340_005.png" title="Merchandising" >            
                            </div>
                            <div class="slider-description">
                                <div class="slider-meta">
                                    <div align="left"><a target="_parent" title="Merchandising" href="#">/ Merchandising /</a>	<i> — Wednesday, February 2, 2012</i></div>
                                </div>
                                <h4 align="left">Caps, Shirts, Jackets...</h4>
                                <p align="left">Clothes and accessories for all teams!
                                    <a class="readmore" href="#">Read more </a>
                                </p>
                            </div>
	                </li> 
                        <li>
	                
                            <div align="center"><img src="images/thumbl_980x340_006.png" title="Payment System" >            
                            </div>
                            <div class="slider-description">
                                <div class="slider-meta">
                                    <div align="left"><a target="_parent" title="Payment System" href="#">/ Paypal, credit card, transfer /</a>	<i>  — Wednesday, February 2, 2012</i></div>
                                </div>
                                <h4 align="left">Payment method</h4>
                                <p align="left">Our Payment System accepts paypal, credit card and transfers
                                    <a class="readmore" href="#">Read more </a>
                                </p>
                            </div>
	                </li> 
	              
	              </ul>  	
	            </div>
                    <div align="center"><!-- END MAIN CONTENT --> 
	            <!-- NAVIGATOR -->
                    </div>
                    <div class="navigator-content">
                        <div class="navigator-wrapper">
                            <div align="center">
                                <ul class="navigator-wrap-inner">
                                    <li> </li>
                                </ul>
                            </div>
                            <ul class="navigator-wrap-inner">
                                <li>
                                    <div>
                                        <div align="center"><img src="images/lofthumbs/1.jpg" />
                                        </div>
                                        <h3 align="left"> Our cars, fantastic!!!</h3>
                                            <div align="left"><span>2012</span> - We have the newest cars: Ferrari, Williams, RBR, Lotus, Mercedes, McClaren...
                                            </div>
                                    </div>    
                                </li>
                                <li>
                                    <div>
                                        <div align="center"><img src="images/lofthumbs/2.jpg" />
                                        </div>
                                        <h3 align="left">  You choose: new, km 0, used, second hand  </h3>
                                            <div align="left"><span>2012</span> - In our store you can find a lot of kinds of cars
                                            </div>
                                    </div>    
                                </li>
	                
                                <li>
                                    <div>
                                        <div align="center"><img src="images/lofthumbs/3.jpg" />
                                        </div>
                                        <h3 align="left">  Pay in 12 months without interest </h3>
                                            <div align="left"><span>2012</span> - Don`t worry!!! You can pay in 12 months!!
                                            </div>
                                    </div>     
                                </li>
	                
                                <li>
                                    <div>
                                        <div align="center"><img src="images/lofthumbs/4.jpg" />
                                        </div>
                                        <h3 align="left"> Hispania Racing Team</h3>
                                            <div align="left"><span>2012</span> - Cars, clothes, toys... all of HRT!
                                            </div>
                                    </div>
                                </li>    
                                <li>
                                    <div>
                                        <div align="center"><img src="images/lofthumbs/5.jpg" />
                                        </div>
                                        <h3 align="left"> Merchandising </h3>
                                            <div align="left"><span>2012</span> - Merchandising: Ferrari, Williams, McClaren, Mercedes, Renault...
                                            </div>
                                    </div>   
                                </li>
                                <li>
                                <div>
                                    <div align="center"><img src="images/lofthumbs/6.jpg" />
                                    </div>
                                    <h3 align="left"> Payment Method</h3>
                                        <div align="left"><span>2012</span> - Paypal, Credit card - visa, mastercard, american express -, Transfers
                                        </div>
                                </div>
                                </li>     		
                            </ul>
                        </div>
	            
	            </div> 
                    <div align="center"><!----------------- END OF NAVIGATOR --------------------->
                    </div>
                    <div class="button-next">
                        <div align="center"></div>
                    </div>
	          
                    <div align="center">
	            <!-- BUTTON PLAY-STOP -->
                    </div>
                    <!--<div class="button-control">
	            <div align="center"><span></span></div>
                    </div>-->
                    <div align="center"><!-- END OF BUTTON PLAY-STOP -->
	            
                    </div>
	        </div> 
	        
	        <div align="center">
	          <!------------------------------------- END OF THE CONTENT ------------------------------------------------->
          	          
                </div>
    </div>
	<div align="center">
	  <table width="100%" height="226" border="0">
	    <tr>
	      <td width="14%" align="center" valign="top" class="fontSpecial"><div align="left">
	        Categories | <a href="allproducts.jsp">All products</a>
<ul id="MenuBar1" class="MenuBarVertical">
	          <li><a class="MenuBarItemSubmenu" href="cars.jsp">Cars</a>
	            <ul>
	              <li><a href="ferrari.jsp">Ferrari</a></li>
	            <li><a href="redbull.jsp">Red Bull Racing</a></li>
	            <li><a href="mcclaren.jsp">McClaren-Mercedes</a></li>
	            <li><a href="mercedes.jsp">Mercedes</a></li>
	            <li><a href="williams.jsp">Williams-Cosworth</a></li>
	            <li><a href="tororosso.jsp">Toro Rosso</a></li>
	            <li><a href="renault.jsp">Renault</a></li>
	            <li><a href="forceindia.jsp">Force India-Mercedes</a></li>
	            <li><a href="sauber.jsp">Sauber</a></li>
	            <li><a href="lotus.jsp">Lotus-Renault</a></li>
	            <li><a href="hispania.jsp">Hispania RT</a></li>
	            <li><a href="virgin.jsp">Virgin</a></li>
	            </ul>
	          </li>
	        <li><a href="#" class="MenuBarItemSubmenu">Apparel</a>
	          <ul>
                <li><a href="shirts.jsp">Shirts</a></li>
                <li><a href="jackets.jsp">Jackets</a></li>
                <li><a href="pants.jsp">Pants</a></li>
                <li><a href="underware.jsp">Underware</a></li>
                <li><a href="sneakers.jsp">Sneakers</a></li>
	          </ul>
	        </li>
	        <li><a href="gadgets.jsp">Gadgets</a>	          </li>
	        <li><a href="#" class="MenuBarItemSubmenu">Car accessories</a>
	          <ul>
	            <li><a href="lights.jsp">Lights</a></li>
                <li><a href="tyres.jsp">Tyres</a></li>
                <li><a href="wheel.jsp">Steering wheel</a></li>
                <li><a href="others.jsp">Other pieces</a></li>
	              </ul>
              </li>
	          </ul>
	        </div>
	        <img src="images/makemonet.png" width="108" height="212" alt="money">
	        
	        <!-- Beginning of meebo me widget code.
        Want to talk with visitors on your page?  
        Go to http://www.meebome.com/ and get your widget! -->
	        <embed src="http://widget.meebo.com/mm.swf?BRqynkBnZM" type="application/x-shockwave-flash" width="150" height="300"></embed>
          </td>
	      <td width="86%" align="right" valign="top" class="borderContent">
	        <p>
	          <img src="images/Goldstar copia.png" alt="store ranking" width="160" height="160" align="bottom">
                  <a href="ferrariOpportunities.jsp">
                     <img src="images/ferrari sale.png" alt="ferrari opportunities" width="317" height="196" class="borderImages">
                  </a>
                  <a href="williamssale.jsp">
                      <img src="images/williams_sale.png" alt="williams sale" width="311" height="196" class="borderImages">
                  </a>
                </p>
	        <h3>&nbsp;            </h3>
	        <h2 align="center">Teams</h2>
	        <h3>
	          <p align="center"><a href="redbull.jsp"><img src="images/carimages_logos/redbull.png" width="35" height="35" alt="redbull"> RedBull</a></p>
	          <p align="center"> <a href="ferrari.jsp"><img src="images/carimages_logos/ferrari.png" width="35" height="35" alt="ferrari"> Ferrari</a></p>
	          <p align="center"><a href="mcclaren.jsp"><img src="images/carimages_logos/mclaren.png" width="35" height="35" alt="mcclaren"> McClaren</a></p>
	          <p align="center"><a href="mercedes.jsp"><img src="images/carimages_logos/mercedes.png" width="35" height="35" alt="mercedes"> Mercedes</a></p>
	          <p align="center"><a href="renault.jsp"><img src="images/carimages_logos/renault.gif" width="35" height="35"> Renault</a></p>
	          <p align="center"><a href="williams.jsp"><img src="images/carimages_logos/williams.png" width="48" height="48" alt="williams"> Williams</a></p>
	          <p align="center"><a href="forceindia.jsp"><img src="images/carimages_logos/force-india.png" width="35" height="35" alt="force india"> Force India</a></p>
	          <p align="center"><a href="tororosso.jsp"><img src="images/carimages_logos/toro-rosso.png" width="35" height="35" alt="tororosso"> Toro Rosso</a></p>
	          <p align="center"><a href="sauber.jsp"><img src="images/carimages_logos/sauber.png" width="35" height="35" alt="sauber"> Sauber</a></p>
	          <p align="center"><a href="hispania.jsp"><img src="images/carimages_logos/hrt.jpg" width="35" height="35" alt="hrt"> HRT</a></p>
	          <p align="center"><a href="lotus.jsp"><img src="images/carimages_logos/lotus.jpg" width="35" height="35" alt="lotus"> Lotus</a></p>
	          <p align="center"><a href="virgin.jsp"><img src="images/carimages_logos/virgin.gif" width="35" height="35" alt="virgin"> Virgin</a></p>
	          <p align="center">&nbsp;</p>
	        </h3>
	        <h3>
  <p align="center">&nbsp;</p>
	        </h3>
	        <div align="center"> </div>
	      </tr>
	    </table>
	  
  </div>
</div>
<div align="center">
  </div>
  
  
  
</div>
<div class="container">
  <div class="footer">
    <h5 align="center" class="white">Alvaro F1 online shop - Your F1 store</h5>
    <div align="center"><a name="final"></a><!-- Marcador para ir al final de la pagina -->
    </div>
    <div id="google_translate_element" align="center"></div>
    <div align="center">
      <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'es'
      }, 'google_translate_element');
    }
      </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>
    <div align="center"><img src="images/footerShop.png" width="940" height="74" alt="footer"></div>
  </div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
